<template>
    <div id="substationCreate">
        <p class="page-title">自助架设VIP站</p>
        <div class="container padder">
            <div class="form">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px"
                         class="demo-ruleForm el-form">
                    <el-form-item label="设置域名：" prop="fenzhan_yuming">
                        <el-input type="text" v-model="ruleForm.fenzhan_yuming" autocomplete="off">
                            <template slot="append">.baomakameng.com</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="分站名称：" prop="fenzhan_mingcheng">
                        <el-input type="text" v-model="ruleForm.fenzhan_mingcheng" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="分站等级：" prop="fenzhan_dengji">
                        <el-select v-model="ruleForm.fenzhan_dengji" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="搭建费用：">
                        <sub class="m-r-xs text-sm">¥</sub>{{selected.price.toFixed(2)}}
                    </el-form-item>
                </el-form>
                <div class="bottom">
                    <span>VIP站邀请/注册的所有用户,VIP站长都额外享有 <span class="text-danger m-r-xs m-l-xs text-md font-bold ">{{selected.percent}}</span>的消费提成!</span>
                    <el-button type="primary" @click="sure" :loading="loading">确认架设</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'create',
        components: {},
        data() {

            return {
                loading: false,
                options: [
                    {label: '青铜分站', value: 1, price: 10, percent: '1%'},
                    {label: '王者分站', value: 2, price: 88, percent: '2%'},
                    {label: '至尊分站 ', value: 3, price: 168, percent: '3%'},
                ],
                ruleForm: {
                    fenzhan_yuming: '',
                    fenzhan_mingcheng: '',
                    fenzhan_dengji: 1
                },
                rules: {
                    fenzhan_yuming: [
                        {required: true, trigger: 'blur', message: '请输入分站域名'},
                        {min: 1, max: 10, trigger: 'blur', message: '域名长度1-10'},
                    ],
                    fenzhan_mingcheng: [
                        {required: true, trigger: 'blur', message: '请输入分站名称'},
                        {min: 1, max: 20, trigger: 'blur', message: '域名长度1-20'},
                    ],
                }
            };
        },
        computed: {
            selected() {
                return this.options.filter(item => item.value === this.ruleForm.fenzhan_dengji)[0]
            }
        },
        methods: {
            sure() {

                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$axios.post('/api/fenzhan/dajian_fenzhan', this.ruleForm)
                            .then(res => {
                                this.loading = false;
                                if (res.code === '200') {
                                    this.$message.success('搭建成功');
                                    this.$router.push('setting')
                                }
                            })
                    }
                })
            }
        },
        mounted() {
        },
    }
</script>

<style lang="less" scoped>
    #substationCreate {
        .form {
            width: 50%;
            padding-bottom: 20px;
            .el-input, .el-select {
                width: 350px;
            }
            .el-form {
                width: 100%;
            }
            /deep/ .el-form-item:last-child {
                border-bottom: 1px solid #dee5e7;
                margin-top: 50px;
                .el-form-item__label {
                    font-size: 15px !important;
                    font-weight: bold;
                }
                .el-form-item__content {
                    color: red;
                    font-size: 20px !important;
                    font-weight: bold;
                }

            }
            .bottom {
                display: flex;
                justify-content: space-between;
            }
        }
    }
</style>
